<template>
    <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>

    <!-- 导航栏区域开始 -->
    <view class="title-wrap" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
        <uni-nav-bar 
            color="#fff"
            background-color="#008000"
            @clickLeft="goBack()"
            @clickRight="goto('/')">
            <template #left>
                <text class="icon iconfont icon-zuojiantou"></text>
            </template>

            <template #default>
                <view class="title">订单详情</view>
            </template>

            <template #right>
                <text class="icon iconfont icon-shouye"></text>
            </template>
        </uni-nav-bar>
    </view>
    <!-- 导航栏区域结束 -->


    <view class="order-detail-container" :style="{ paddingTop: safeAreaInsets?.top + 100 + 'rpx' }">

        <!-- 骨架屏区域开始 -->
        <uv-skeletons :loading="isShowSkeleton" :skeleton="skeleton"></uv-skeletons>
        <!-- 骨架屏区域结束 -->

        <!-- 订单状态区域开始 -->
        <view class="status-wrap">
            <block v-for="(item, index) in statusItems" :key="index">
                <view class="item" :class="item.bgc" v-if="orderInfo.status != 0 && item.value == orderInfo.status">
                    <text :class="'icon iconfont ' + item.icon_name"></text>
                    <text class="txt">{{item.value_txt}}</text>
                </view>
                <!-- 待付款区域 -->
                <view class="item" :class="item.bgc" v-else-if="orderInfo.status == 0 && item.value == orderInfo.status">
                    <text :class="'icon iconfont ' + item.icon_name"></text>
                    <view class="desc">
                        <view class="top">
                            <text class="time">支付剩余</text>
                            <uni-countdown
                                :second="orderInfo.expire_time"
                                :show-day="false"
                                color="#FFFFFF"
                                splitorColor="#FFFFFF"
                                :show-colon="false"
                                @timeup="onTimeup"
                            />
                        </view>
                        <view class="bottom">{{item.value_txt}}</view>
                    </view>
                </view>

            </block>
        </view>
        <!-- 订单状态区域结束 -->

        <!-- 物流信息区域开始 -->
        <view class="logistic-wrap" v-if="orderLogistics.length > 0">
            <view class="logistic-item">
                <view class="logistic-left">
                    <text class="icon iconfont icon-wuliu"></text>
                </view>
                <view class="logistic-right">
                    <text class="message">{{orderLogistics[orderLogistics.length - 1].message}}</text>
                    <text class="date"> {{ orderLogistics[orderLogistics.length - 1].create_time }} </text>
                </view>
            </view>
            <view class="more" @click="moreOrderLogistics">
                <text>查看更多物流信息</text>
            </view>
        </view>
        <!-- 物流信息区域结束 -->
        <block v-if="orderInfo.oid">
            <!-- 商品信息区域开始 -->
            <view class="goods-wrap">
                <view class="goods-list">
                    <view class="goods-item" v-for="item in orderInfo.orderItems" :key="item.id">
                        <!-- 商品图片区域开始 -->
                        <view class="left" @click="goto('/pagesGoods/goods_detail/index?id=' + item.goods_id)">
                            <image class="cover" :src="global.FILE_DOMAIN + item.goods_cover_url"/>
                        </view>
                        <!-- 商品图片区域结束 -->

                        <!-- 商品信息区域开始 -->
                        <view class="right">
                            <view class="name ellipsis-2" @click="goto('/pagesGoods/goods_detail/index?id=' + item.goods_id)">{{ item.goods_name }}</view>
                            <!-- sku -->
                            <view class="sku" @click="goto('/pagesGoods/goods_detail/index?id=' + item.goods_id)">{{ item.goods_sku_text }}</view>

                            <!-- 价格 -->
                            <view class="price-wrap" @click="goto('/pagesGoods/goods_detail/index?id=' + item.goods_id)">
                                <view class="price">
                                    <text class="symbol">￥</text>
                                    <text class="num">{{ (item.goods_price/100).toFixed(2) }}</text>
                                </view>
                                <view class="num">x {{ item.goods_num }}</view>
                            </view>

                            <!-- 评价 -->
                            <view class="evaluate-wrap" v-if="[6].includes(item.status) && orderInfo.orderItems.length > 1">
                                <text class="evaluate-btn" @click="handleShowEvaluatePopup(item)">评价</text>
                            </view>

                            <!-- 追加评价 -->
                            <view class="evaluate-wrap" v-if="[7].includes(orderInfo.status) && orderInfo.orderItems.length > 1">
                                <text class="evaluate-btn" @click="handleShowEvaluatePopup(item)">追加评价</text>
                            </view>
                        </view>
                        <!-- 商品信息区域结束 -->
                    </view>
                </view>

                <!-- 订单金额区域开始 -->
                <view class="order-price-wrap">
                    <view class="order-price-item">
                        <text class="title">商品总价:</text>
                        <view class="amount">
                            <text class="symbol">￥</text>
                            <text class="num">{{ (orderInfo.order_money/100).toFixed(2) }}</text>
                        </view>
                    </view>

                    <view class="order-price-item">
                        <text class="title">运费:</text>
                        <view class="amount">
                            <text class="symbol">￥</text>
                            <text class="num">10.00</text>
                        </view>
                    </view>

                    <view class="order-price-item">
                        <text class="title">应付金额:</text>
                        <view class="amount">
                            <text class="symbol">￥</text>
                            <text class="num money">{{ ((orderInfo.pay_money + 1000)/100).toFixed(2) }}</text>
                        </view>
                    </view>
                </view>
                <!-- 订单金额区域结束 -->
            </view>
            <!-- 商品信息区域结束 -->

            <!-- 订单信息区域开始 -->
            <view class="order-wrap">
                <view class="title">
                    <text>订单信息</text>
                </view>
                <view class="item">
                    <text>订单编号:</text>
                    <text class="value">{{ orderInfo.oid }}</text>
                    <text class="copy" @tap="onCopy(query.oid)">复制</text>
                </view>
                <view class="item">
                    <text>下单时间:</text>
                    <text class="value">{{ orderInfo.create_time }}</text>
                </view>
            </view>
            <!-- 订单信息区域结束 -->

            <!-- 收货地址区域开始 -->
            <view class="address-wrap">
                <view class="title">
                    <text>收货地址</text>
                </view>
                <view class="content">
                    <view class="address-left">
                        <text class="icon iconfont icon-dizhi"></text>
                    </view>
                    <view class="address-right">
                        <view class="top">
                            <text class="name">{{ordeDeliveryAddr.name}}</text>
                            <text class="mobile">{{ordeDeliveryAddr.mobile}}</text>
                        </view>
                        <view class="address">{{ordeDeliveryAddr.region}} {{ordeDeliveryAddr.address}}</view>
                    </view>
                </view>
            </view>
            <!-- 收货地址区域结束 -->
        </block>
        <!-- 底部操作区域开始 -->
        <view class="action-wrap" :style="{ paddingBottom: safeAreaInsets.bottom + 'rpx' }">
            <!-- 待付款状态:展示支付按钮 -->
            <template v-if="orderInfo.status == 0">
                <view @click="onOrderPay" class="action-button primary"> 去支付 </view>
                <view class="action-button cancel" @click="showCancelOrder(orderInfo.oid)"> 取消订单 </view>
            </template>

            <!-- 其他订单状态:按需展示按钮 -->
            <template v-else>
                <!-- <navigator
                    class="action-button buy"
                    :url="`/pagesGoods/goods_detail/index?id=`"
                    hover-class="none"
                >
                    再次购买
                </navigator> -->

                <!-- 退款 -->
                <view class="action-button primary" v-if="[1,2,3,4,5,6].includes(orderInfo.status)" @click="handleRefund(orderInfo.oid)">退 款</view>

                <!-- 待收货状态: 展示确认收货 -->
                <view v-if="[3,4,5].includes(orderInfo.status)" class="action-button primary" @click="handleConfirmOrder(orderInfo.oid)"> 确认收货 </view>

                <!-- 待评价状态: 展示去评价 -->
                <view v-if="orderInfo.status == 6 && orderInfo.orderItems.length == 1" class="action-button" @click="handleShowEvaluatePopup(orderInfo.orderItems[0])"> 评价 </view>
                <!-- 待评价状态: 展示追加评价 -->
                <view v-if="orderInfo.status == 7 && orderInfo.orderItems.length == 1" class="action-button" @click="handleShowEvaluatePopup(orderInfo.orderItems[0])"> 追加评价 </view>

                <!-- <view v-if="[-1].includes(orderInfo.status)" class="action-button primary" @click="handleConfirmOrder(orderInfo.oid)"> 再次购买 </view> -->

                <!-- 待评价/已完成/已取消 状态: 展示删除订单 -->
                <!-- <view v-if="[-1,6,7].includes(orderInfo.status)" class="action-button delete" @click="handleDeleteOrder(orderInfo.oid)"> 删除订单 </view> -->
            </template>

            <view @click="goto('/')" class="action-button"> 去首页 </view>
        </view>
        <!-- 底部操作区域结束 -->
    </view>


    <!-- 物流信息弹窗开始 -->
    <uni-popup ref="logisticPopup" type="top" background-color="#fff" :mask-click="false">
        <view class="logistic-container">
            <scroll-view scroll-y class="scroll-view">
                <uni-steps :options="orderLogistics" active-color="#008000" :active="active" direction="column" />
            </scroll-view>

            <view class="logistic-btn-wrap">
                <text @click="handlerCloseLogistic" class="evaluate-btn">关闭</text>
            </view>
        </view>
    </uni-popup>
    <!-- 物流信息弹窗结束 -->


    <!-- 取消订单弹窗开始 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
        <view class="popup-wrap">
            <view class="title">订单取消</view>
            <view class="description">
                <view class="tips">请选择取消订单的原因：</view>
                <view
                    class="cell"
                    v-for="item in reasonList"
                    :key="item"
                    @tap="reason = item"
                >
                    <text class="txt" :class="item === reason ? ' txt-checked' : ''">{{ item }}</text>
                    <text class="icon iconfont" :class="item === reason ? ' icon-checked icon-xuanzhong' : 'icon-weixuanzhong'"></text>
                </view>
            </view>
            <view class="footer">
                <view class="btn" @click="popup?.close?.()">取消</view>
                <view class="btn primary" @click="confirmCancelOrder()">确认</view>
            </view>
        </view>
    </uni-popup>
    <!-- 取消订单弹窗结束 -->

    <!-- 订单评价弹窗开始 -->
    <uni-popup ref="evaluatePopup" type="bottom" background-color="#fff" :mask-click="false">
        <view class="evaluate-wrap">

            <!-- 标题区域开始 -->
            <view class="evaluate-title">
                <text class="title">评价商品</text>
                <text class="icon iconfont icon-guanbi" @click="evaluatePopupClose"></text>
            </view>
            <!-- 标题区域结束 -->

            <!-- 商品信息区域开始 -->
            <view class="goods-wrap">
                <view class="goods-left">
                    <image class="goods-cover" v-if="evaluateGoods.goods_cover_url" :src="global.FILE_DOMAIN + evaluateGoods.goods_cover_url"/>
                </view>
                <view class="goods-right">
                    <view class="goods-name ellipsis-1">{{ evaluateGoods.goods_name }}</view>
                    <view class="goods-sku">{{ evaluateGoods.goods_sku_text }}</view>
                </view>
            </view>
            <!-- 商品信息区域结束 -->

            <!-- 表单区域开始 -->
            <view class="evaluate-form">
                <!-- 基础表单校验 -->
				<uni-forms ref="formRef" :modelValue="formParams">
					<!-- 收货人 -->
					<uni-forms-item>
                        <uni-easyinput type="textarea" autoHeight v-model="formParams.contents" placeholder="请输入内容"></uni-easyinput>
					</uni-forms-item>

                    <uni-forms-item>
                        <uni-file-picker
                            v-model="imageList"
                            :limit="4"
                            disable-preview
                            fileMediatype="image"
                            @select="selectUploadImage"
                            @delete="deleteUploadImage"
                        ></uni-file-picker>
                    </uni-forms-item>
				</uni-forms>

                <!-- 评分区域开始 -->
                <view class="score-wrap">
                    <view class="score-item">
                        <text class="title composite">综合评价</text>
                        <uni-rate size="28" activeColor="#CD0011" :isFill="false" v-model="formParams.composite_score"/>
                    </view>
                    <view class="score-item">
                        <text class="title">描述相符</text>
                        <uni-rate size="24" v-model="formParams.conform_score"/>
                    </view>
                    <view class="score-item">
                        <text class="title">物流服务</text>
                        <uni-rate size="24" v-model="formParams.logistic_score"/>
                    </view>
                    <view class="score-item">
                        <text class="title">服务态度</text>
                        <uni-rate size="24" v-model="formParams.serve_score"/>
                    </view>
                </view>
            </view>
            <!-- 表单区域结束 -->
        </view>

        <view class="evaluate-btn-wrap">
            <button type="primary" style="background-color: #CD0011;" @click="confirmEvaluate" size="mini" class="evaluate-btn">发 布</button>
        </view>
    </uni-popup>
    <!-- 订单评价弹窗结束 -->


</template>

<script setup lang="ts">
import { reqCancelOrderAPI, reqConfirmOrderAPI, reqOrderDetailAPI, reqDeleteOrderAPI, reqPaymentOrderAPI, reqRefundOrderAPI } from '@/apis/order'
import { reqAddGoodsEvaluateAPI, reqAppendGoodsEvaluateAPI } from '@/apis/goodsEvaluate'
import { reqMpWxPayAPI } from '@/apis/payment'
import { onReady } from '@dcloudio/uni-app'
import { ref, inject, reactive } from 'vue';
import { useUserStore } from '@/stores'

// -------------- 定义全局变量开始 --------------
// 全局属性
const global:any = inject('global')

// 用户存储
const userStore = useUserStore()

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// -------------- 定义全局变量结束 --------------



// -------------- 定义骨架变量开始 --------------
// 定义是否显示骨架
const isShowSkeleton = ref(false)

// 定义骨架参数
const skeleton = reactive([
    {
        type: 'flex',
        num: 1,
        style: 'margin-top: 20rpx;padding:0 5rpx;justify-content: space-between;',
        children: [
            {
                type: 'line',
                num: 1,
                style: 'height: 140rpx;border-top-left-radius: 40rpx;border-top-right-radius: 40rpx;'
            }
        ]
    },
    20,
    {
        type: 'flex',
        num: 1,
        style: 'margin-top: 20rpx;padding:0 5rpx;justify-content: space-between;',
        children: [
            {
                type: 'line',
                num: 1,
                style: 'height: 160rpx'
            }
        ]
    },
    20,
    {
        type: 'flex',
        num: 1,
        style: 'padding: 30rpx 10rpx 0 10rpx;background-color: #fff;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 200rpx;height:200rpx;marginLeft: 10rpx;marginRight: 20rpx;'
            },
            {
                type: 'line',
                num: 3,
                style: [null, null, 'width:400rpx;', 'width:400rpx;']
            },
        ]
    },
    // 价格区域
    {
        type: 'flex',
        num: 1,
        style: 'padding:0 5rpx;justify-content: flex-end;align-items: center;background-color: #fff;padding-bottom: 30rpx',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 120rpx;height: 40rpx;margin-right:286rpx'
            },
            {
                type: 'custom',
                num: 1,
                style: 'width: 60rpx;height: 40rpx'
            },
        ]
    },
    {
        type: 'line',
        num: 1,
        style: 'height: 2rpx'
    },
    {
        type: 'flex',
        num: 3,
        style: 'padding: 30rpx 5rpx;justify-content: space-between;align-items: center;background-color: #fff;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 140rpx;height: 40rpx;'
            },
            {
                type: 'custom',
                num: 1,
                style: 'width: 100rpx;height: 40rpx'
            },
        ]
    },
    {
        type: 'line',
        num: 1,
        style: 'height: 60rpx;width: 40%'
    },
    20,
    {
        type: 'flex',
        num: 1,
        style: 'padding: 30rpx 5rpx;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 140rpx;height: 40rpx;'
            },
            {
                type: 'custom',
                num: 1,
                style: 'width: 100rpx;height: 40rpx;margin-left: 10rpx;'
            },
        ]
    },
    {
        type: 'flex',
        num: 1,
        style: 'padding: 30rpx 5rpx;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 140rpx;height: 40rpx;'
            },
            {
                type: 'custom',
                num: 1,
                style: 'width: 300rpx;height: 40rpx;margin-left: 10rpx;'
            },
        ]
    },

    {
        type: 'flex',
        num: 1,
        style: 'align-items: center;background-color: #fff;padding:20rpx;border-radius: 6rpx;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'width: 60rpx;height:80rpx;margin-right: 10rpx'
            },
            {
                type: 'custom',
                num: 2,
                style: ['width: 300rpx;height:40rpx;', 'width: 480rpx;height:30rpx;']
            }
        ]
    }
])
// -------------- 定义骨架变量结束 --------------



// -------------- 显示物流功能开始 --------------
const active = ref(0)

const logisticPopup = ref()

const show = ref(false)

const moreOrderLogistics = () => {
    logisticPopup.value.open('bottom')
    show.value = true
}

const handlerCloseLogistic = () => {
    show.value = false
    logisticPopup.value.close()
}

// -------------- 显示物流功能结束 --------------



// -------------- 订单评价功能开始 --------------
// 弹出层组件
const evaluatePopup = ref()

const status = ref(0)
const evaluateGoods:any = ref({})

// 表单参数
const formParams:any = reactive({
    oid: 0,
    order_item_id: 0,
    goods_id: 0,
    goods_name: '',
    goods_sku_id: 0,
    goods_sku_text: '',
    username: userStore.profile.user.username,
    avatar_url: userStore.profile.user.avatar_url,
    contents: '',
    image_url: '',
    composite_score: 0,
    conform_score: 0,
    logistic_score: 0,
    serve_score: 0,
})

// 显示订单评价弹层
const handleShowEvaluatePopup = (item:any) => {
    evaluateGoods.value = item
    formParams.oid = item.oid
    formParams.order_item_id = item.id
    formParams.goods_id = item.goods_id
    formParams.goods_name = item.goods_name
    formParams.goods_sku_id = item.goods_sku_id
    formParams.goods_sku_text = item.goods_sku_text

    status.value = item.status

    // 重置表单数据
    formParams.contents = ''
    formParams.image_url = ''
    formParams.composite_score = 0
    formParams.conform_score = 0
    formParams.logistic_score = 0
    formParams.serve_score = 0

    imageList.value = []

    // 显示评价弹层
    evaluatePopup.value.open('bottom')
}

// 关闭订单评价弹层
const evaluatePopupClose = () => {
    evaluatePopup.value.close()
}

// 图片
const imageList = ref([])

// 选择图片
const selectUploadImage = (e:any) => {
    uni.showLoading({
        title: '图片上传中...',
        mask: true
    })
    const uploadTask = uni.uploadFile({
        url:global.UPLOAD_FILE_API,
        filePath:e.tempFilePaths[0],
        name:'file',
        success: (uploadFileRes) => {
            uni.hideLoading()
            // 解析数据
            let result:any = JSON.parse(uploadFileRes.data)

            if (result.code == 200) {
                imageList.value.push({tempFilePath: e.tempFilePaths[0],imageUrl: result.data.image_url} as never)
                uni.showToast({
                    title: result.message,
                    duration: 1000
                })
            } else {
                uni.showToast({
                    icon: 'none',
                    title: result.message,
                })
            }
        },
        fail: () => {
            uni.hideLoading()
            uni.showToast({
                icon: 'none',
                title: '网络开小差,换网络试试!',
            })
        }
    })


    // uploadTask.onProgressUpdate((res) => {
    //     console.log('上传进度' + res.progress);
    //     console.log('已经上传的数据长度' + res.totalBytesSent);
    //     console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
    // });
}

const deleteUploadImage = (e:any) => {
    const index = imageList.value.findIndex((item:any) => item.tempFilePath === e.tempFilePath)
    imageList.value.splice(index, 1)
}

// 提交评价
const confirmEvaluate = async () => {
    if (formParams.contents == '') {
        uni.showToast({
            icon: 'none',
            title: '请输入内容',
        })
        return false
    }
    if (status.value == 6) {
        // 提交参数判断
        if (formParams.composite_score == 0) {
            uni.showToast({
                icon: 'none',
                title: '请选择综合评分',
            })
            return false
        }
        if (formParams.conform_score == 0) {
            uni.showToast({
                icon: 'none',
                title: '请选择描述相符评分',
            })
            return false
        }
        if (formParams.logistic_score == 0) {
            uni.showToast({
                icon: 'none',
                title: '请选择物流服务评分',
            })
            return false
        }
        if (formParams.serve_score == 0) {
            uni.showToast({
                icon: 'none',
                title: '请选择服务态度评分',
            })
            return false
        }
    }

    // 组装图片数据
    let image_url = ''
    if (imageList.value.length > 0) {
        imageList.value.forEach((value:any) => {
            image_url += value.imageUrl + ','
        });
    }

    formParams.image_url = image_url.substring(0,image_url.length-1)
    if (status.value == 7) {
        formParams.is_append = 1
        // 请求追加评价接口
        await reqAppendGoodsEvaluateAPI(formParams)
        uni.showToast({
            title: '追评成功',
            duration: 1000
        })
    } else {
        // 请求新增评价接口
        await reqAddGoodsEvaluateAPI(formParams)
        uni.showToast({
            title: '评价成功',
            duration: 1000
        })


        // 查找订单明细，将其状态设置为：已完成
        orderInfo.value.orderItems.forEach((item:any) => {
            if (item.id == formParams.order_item_id) {
                item.status = 7
            }
        })

        // 判断该订单是否存在未评价的商品
        let flag = false
        orderInfo.value.orderItems.forEach((item:any) => {
            if (item.status == 6) {
                flag = true
            }
        })

        if (!flag) {
            orderInfo.value.status = 7
        }
    }

    evaluatePopup.value.close()
}
// -------------- 订单评价功能结束 --------------



// -------------- 取消订单功能开始 --------------
// 弹出层组件
const popup = ref()
// 取消原因列表
const reasonList = ref([
  '商品无货',
  '不想要了',
  '商品信息填错了',
  '地址信息填写错误',
  '商品降价',
  '其它',
])
// 订单取消原因
const reason = ref('')

const orderId = ref(0)

// 显示取消订单弹层
const showCancelOrder = (oid:any) => {
  orderId.value = oid
  popup.value.open('bottom')
}

// 确定取消订单
const confirmCancelOrder = async () => {
  // 判断取消原因
  if (reason.value == '') {
    uni.showToast({
      icon: 'none',
      title: '请选择取消原因!',
      duration: 1000
    })

    return false
  }

  // 请求
  await reqCancelOrderAPI({oid: orderId.value, cancel_reason: reason.value})
  uni.showToast({
        title: '取消订单成功',
        duration: 1000
    })

  orderInfo.value.status = -1
  popup.value?.close()
}
// -------------- 取消订单功能结束 --------------



// -------------- 删除订单功能开始 --------------
const handleDeleteOrder = async (oid:any) => {
  uni.showModal({
    content:'删除的订单可以在电脑端查看!',
    success: async (res) => {
      if (res.confirm) {
        await reqDeleteOrderAPI(oid)
        uni.showToast({
          title: '删除成功',
          duration: 1000
        })

        // const index = orderList.value.findIndex((item:any) => item.oid == oid)
        // orderList.value.splice(index, 1)
      }
    }
  })
}
// -------------- 删除订单功能结束 --------------



// ---------------------- 确认收货功能开始 ----------------------
const handleConfirmOrder = (oid:any) => {
    uni.showModal({
	    content: '确定要确认收货吗?',
	    success: async (res) => {
	        if (res.confirm) {
            await reqConfirmOrderAPI(oid)
            uni.showToast({
              title: '确认收货成功',
              duration: 1000
            })

            orderInfo.value.status = 6
	        }
	    }
	})
}
// -------------- 确认收货功能结束 --------------



// ---------------------- 退款功能开始 ----------------------
const handleRefund = (oid:any) => {
    uni.showModal({
	    content: '确定要退款吗?',
	    success: async (res) => {
	        if (res.confirm) {
                await reqRefundOrderAPI(oid)
                uni.showToast({
                    title: '退款成功',
                    duration: 1000
                })

                orderInfo.value.status = 8
	        }
	    }
	})
}
// -------------- 退款功能结束 --------------


// 复制内容
const onCopy = (id:any) => {
  // 设置系统剪贴板的内容
  uni.setClipboardData({ data: id })
}

// 获取页面参数
const query = defineProps({
    "oid": {
        type: String,
        default: '0'
    }
})


onReady(() => {
    getOrderDetail()
})




// -------------- 订单倒计时功能开始 --------------
const onTimeup = () => {
    // 当倒计结束的时候修改订单状态为：已取消
    orderInfo.value.status = -1
}
// -------------- 订单倒计时功能结束 --------------



// --------------- 订单支付功能开始 ---------------
const onOrderPay = async () => {
    // import.meta.env.DEV
    // #ifdef MP-WEIXIN
    // 后台获取微信支付的请求参数
    // const result = await reqMpWxPayAPI(orderInfo.value.oid)
    // wx.requestPayment(result.data)
    // #endif

    uni.showModal({
        content: '当前支付功能仅模拟模式?',
        success: async (res) => {
            if (res.confirm) {
                await reqPaymentOrderAPI(orderInfo.value.oid)
                uni.showToast({
                    title: '支付成功',
                    duration: 1000
                })

                orderInfo.value.status = 1

                setTimeout(() => {
                    uni.redirectTo({url: '/pagesOrder/payment_result/success?oid='+orderInfo.value.oid})
                }, 1000)
            }
        }
    })
}
// --------------- 订单支付功能结束 ---------------



// ------------- 获取订单详情功能开始 -------------
const orderInfo:any = ref({})
const statusItems:any = ref([])
const ordeDeliveryAddr:any = ref({})
const orderLogistics:any = ref([])
const getOrderDetail = async () => {
    // 显示骨架
    isShowSkeleton.value = true

    const result:any = await reqOrderDetailAPI(query.oid, 1)
    orderInfo.value = result.data.order

    // 组装订单状态数据
    result.data.status_items.forEach((item:any) => {
        if (item.value == 0) { // 待支付
            item.bgc = ''
        } else if (item.value == 1) { // 已付款
            item.bgc = 'yifukuan-bgc'
        } else if (item.value == 2) { // 待发货
            item.bgc = 'daifahuo-bgc'
        } else if ([3,4,5].includes(item.value)) { // 已发货,已揽件,派件中
            item.bgc = 'primary-bgc'
        } else if (item.value == 6) { // 待评价
            item.bgc = 'daipingjia-bgc'
        } else if (item.value == 7) { // 已完成
            item.bgc = 'yiwancheng-bgc'
        } else if (item.value == 8) { // 退款中
            item.bgc = 'tuikuanzhong-bgc'
        } else { // 已取消,已退款,已关闭...
            item.bgc = 'default-bgc'
        }

        statusItems.value.push(item)
    });

    ordeDeliveryAddr.value = result.data.order_delivery_addr
    orderLogistics.value = result.data.order_logistics != null ? result.data.order_logistics : []
    orderLogistics.value.forEach((item:any) => {
        item.title = item.message
        item.desc = item.create_time
    });

    // 隐藏骨架
    isShowSkeleton.value = false
}
// ------------- 获取订单详情功能结束 -------------

// 跳转
const goto = (url:any) => {
    if (url == '/') {
        uni.switchTab({ url: '/pages/index/index' })
    } else {
        uni.navigateTo({ url })
    }
}

// 返回上一页面
const goBack = () => {
    uni.navigateBack()
}
</script>

<style lang="scss">

// 物流弹窗开始
.logistic-container {
    padding: 20rpx 20rpx 10rpx 20rpx;
    .scroll-view {
        height: calc(100vh - 300rpx);
    }
    .logistic-btn-wrap {
        height: 70rpx;
        .evaluate-btn {
            display: block;
            height: 70rpx;
            line-height: 70rpx;
            text-align: center;
            background-color: #008000;
            color: #fff;

        }
    }
}
// 物流弹窗结束

// 评价弹窗开始
.evaluate-wrap {
    padding: 0 20rpx;
    // 标题区域开始
    .evaluate-title {
        text-align: center;
        font-size: 36rpx;
        font-weight: bold;
        height: 100rpx;
        line-height: 100rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 2rpx solid #ccc;
        .title {
            flex: 1;
        }
        .icon {
            font-size: 50rpx;
            color: #CD0011;
            width: 50rpx;
        }
    }

    // 商品信息区域开始
    .goods-wrap {
        display: flex;
        padding: 20rpx;
        .goods-left {
            width: 120rpx;
            height: 120rpx;
            .goods-cover {
                width: 100%;
                height: 100%;
            }
        }
        .goods-right {
            flex: 1;
            padding-left: 14rpx;
            .goods-name {
                font-size: 28rpx;
                margin-bottom: 10rpx;
            }
            .goods-sku {
                font-size: 24rpx;
                color: #8F939C;
                background-color: #EBEBEC;
                padding: 10rpx;
                border-radius: 8rpx;
            }
        }
    }

    // 表单区域开始
    .evaluate-form {
        // 评分区域开始
        .score-wrap {
            .score-item {
                display: flex;
                align-items: center;
                padding: 10rpx 0;
                .composite {
                    color: #CD0011;
                }
                .title {
                    font-size: 32rpx;
                    font-weight: bold;
                    margin-right: 10rpx;
                }
            }
        }
    }
}
.evaluate-btn-wrap {
    text-align: center;
    padding: 30rpx 0;
    .evaluate-btn {
        padding: 10rpx 0;
        font-size: 30rpx;
        width: 80%;
        border-radius: 60rpx;
    }
}
// 评价弹窗结束


.title-wrap {
    position: fixed;
    background-color: #008000;
    width: 100%;

    .title {
        /* #ifdef H5 */
        font-weight: bold;
        font-size: 28rpx;
        /* #endif */

        /* #ifndef H5 */
        font-size: 24rpx;
        /* #endif */
        display: flex;
        align-items: center;
        margin: 0 auto;
    }
    .icon {
        font-size: 40rpx;
    }
}

.order-detail-container {
    /* #ifdef H5 */
    padding: 100rpx 20rpx 120rpx 20rpx;
    /* #endif */

    /* #ifndef H5 */
    padding: 120rpx 20rpx 120rpx 20rpx;
    /* #endif */


    // 订单状态区域开始
    .status-wrap {
        .item {
            border-top-left-radius: 20rpx;
            border-top-right-radius: 20rpx;
            padding: 20rpx;
            margin-bottom: 20rpx;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #CD0011;
            .icon {
                font-size: 60rpx;
                padding-right: 10rpx;
            }
            .txt {
                font-size: 36rpx;
            }
            .desc {
                .top {
                    height: 40rpx;
                    line-height: 40rpx;
                    display: flex;
                    .time {
                        font-size: 26rpx;
                    }
                }
                .bottom {
                    text-align: center;
                    border-top: 2rpx dashed #fff;
                    font-size: 36rpx;
                }
            }
        }

        .yifukuan-bgc {
            background-color: #27BA52;
        }
        .daifahuo-bgc {
            background-color: #FF9240;
        }
        .primary-bgc {
            background-color: #2979FF;
        }
        .yiwancheng-bgc {
            background-color: #03D8CE;
        }
        .tuikuanzhong-bgc {
            background-color: #F76C6C;
        }
        .daipingjia-bgc {
            background-color: #E029F0;
        }
        .default-bgc {
            background-color: #8F939C;
        }
    }
    // 订单状态区域结束

    // 物流信息区域开始
    .logistic-wrap {
        border-radius: 8rpx;
        background-color: #fff;
        padding: 20rpx;
        margin-bottom: 20rpx;
        .logistic-item {
            display: flex;
            align-items: center;
            .logistic-left {
                width: 60rpx;
                height: 60rpx;
                .icon {
                    font-size: 60rpx;
                    color: #008000;
                }
            }
            .logistic-right {
                padding-left: 10rpx;
                display: flex;
                flex-direction: column;
                .message {
                    font-size: 26rpx;
                    padding-bottom: 10rpx;
                }
                .date {
                    font-size: 24rpx;
                    color: #ccc;
                }
            }
        }
        .more {
            font-size: 24rpx;
            color: #ccc;
            padding-top: 20rpx;
            text-align: center;
        }
    }
    // 物流信息区域结束

    // 商品信息区域开始
    .goods-wrap {
        border-radius: 8rpx;
        background-color: #fff;
        padding: 20rpx;
        font-size: 28rpx;
        .goods-list {
            padding-bottom: 40rpx;
            .goods-item {
                display: flex;
                padding: 10rpx 0;
                border-top: 2rpx dashed #ccc;

                &:first-child {
                    border-top: none;
                }

                /*商品图片区域*/
                .left {
                    width: 200rpx;
                    height: 200rpx;
                    .cover {
                        width: 100%;
                        height: 100%;
                    }
                }

                /*商品信息区域*/
                .right {
                    flex: 1;
                    padding-left: 20rpx;
                    .name {
                        font-size: 30rpx;
                    }
                    .sku {
                        margin: 20rpx 0;
                        padding: 6rpx 10rpx;
                        background-color: #F7F7F8;
                        font-size: 24rpx;
                        color: #888888;
                        border-radius: 4rpx;
                    }
                    
                    // 价格
                    .price-wrap {
                        display: flex;
                        justify-content: space-between;
                        .price {
                            .symbol {
                                color: #CD0011;
                                font-size: 24rpx;
                            }
                            .num {
                                color: #CD0011;
                                font-size: 28rpx;
                            }
                        }
                    }

                    // 评价
                    .evaluate-wrap {
                        display: flex;
                        justify-content: flex-end;
                        padding: 10rpx 0;
                        .evaluate-btn {
                            border: 2rpx solid #008000;
                            padding: 4rpx 30rpx;
                            border-radius: 4rpx;
                            color: #008000;
                        }
                    }
                }
            }
        }

        // 订单金额区域
        .order-price-wrap {
            border-top: 2rpx solid #ccc;
            padding-top: 30rpx;
            .order-price-item {
                padding: 10rpx 0;
                display: flex;
                justify-content: space-between;
                .title {
                    font-size: #666666;
                }
                .amount {
                    .symbol {
                        color: #CD0011;
                        font-size: 24rpx;
                    }
                    .num {
                        color: #CD0011;
                        font-size: 32rpx;
                    }
                    .money {
                        font-size: 32rpx;
                        font-weight: bold;
                    }
                }
            }
        }
    }
    // 商品信息区域结束

    // 订单信息区域开始
    .order-wrap {
        margin-top: 20rpx;
        background-color: #fff;
        border-radius: 8rpx;
        padding: 20rpx;
        .title {
            font-size: 28rpx;
            font-weight: bold;
            padding-bottom: 10rpx;
            border-bottom: 2rpx solid #ccc;
        }
        .item {
            display: flex;
            padding: 16rpx 0 0 0;
            font-size: 28rpx;
            .value {
                padding-left: 14rpx;
            }
            .copy {
                border-radius: 10rpx;
                font-size: 20rpx;
                border: 1px solid #ccc;
                color: #ccc;
                padding: 5rpx 10rpx;
                margin-left: 10rpx;
            }
        }
    }
    // 订单信息区域结束

    // 收货地址区域开始
    .address-wrap {
        margin-top: 20rpx;
        background-color: #fff;
        border-radius: 8rpx;
        padding: 20rpx;
        .title {
            font-size: 28rpx;
            font-weight: bold;
            padding-bottom: 10rpx;
            border-bottom: 2rpx solid #ccc;
        }
        .content {
            display: flex;
            align-items: center;
            padding-top: 10rpx;
            .address-left {
                width: 50rpx;
                height: 50rpx;
                .icon {
                    font-size: 50rpx;
                    color: #008000;
                }
            }
            .address-right {
                flex: 1;
                padding-left: 8rpx;
                .top {
                    font-size: 28rpx;
                    .mobile {
                        margin-left: 10rpx;
                    }
                    padding-bottom: 10rpx;
                }
                .address {
                    font-size: 24rpx;
                }
            }
        }
    }
    // 收货地址区域结束

    // 底部操作区域开始
    .action-wrap {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: content-box;

        position: fixed;
        left: 0;
        bottom: -1rpx;

        width: 100%;
        height: 100rpx;
        background-color: #fff;
        border-top: 2rpx solid #ccc;
        .action-button {
            height: 60rpx;
            line-height: 60rpx;
            width: 200rpx;
            text-align: center;
            background-color: #fff;
            border: 2rpx solid #008000;
            color: #008000;
            margin-left: 20rpx;
            border-radius: 30rpx;
            font-size: 28rpx;
            &:last-child {
                margin-right: 20rpx;
            }
        }
        .primary {
            background-color: #CD0011;
            color: #fff;
        }
        .buy {
            border: 2rpx solid gray;
            color: gray;
        }
        .cancel {
            border: 2rpx solid gray;
            color: gray;
        }
    }
    // 底部操作区域结束
}

// 取消订单弹窗开始
.popup-wrap {
    .title {
        font-size: 34rpx;
        text-align: center;
        padding: 20rpx 0;
        border-bottom: 2rpx solid #ccc;
    }
    .description {
        padding: 0 20rpx;
        .tips {
            font-size: 32rpx;
            padding-top: 20rpx;
        }
        .cell {
            display: flex;
            justify-content: space-between;
            padding: 14rpx 0;

            color: gray;
            .txt {
                font-size: 28rpx;
            }
            .txt-checked {
                color: #CD0011;
            }
            .icon {
                font-size: 36rpx;
            }
            .icon-checked {
                color: #CD0011;
            }
        }
    }
    .footer {
        display: flex;
        padding: 20rpx;
        justify-content: space-evenly;
        .btn {
            padding: 16rpx 100rpx;
            border: 2rpx solid #CD0011;
            border-radius: 40rpx;
            color: #CD0011;
        }
        .primary {
            color: #fff;
            background-color: #CD0011;
        }
    }
}
// 取消订单弹窗结束
</style>